<template v-slot:headerContentRender>
  <!-- 预测项目的预算模型 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="门店">
              <a-select placeholder="请选择门店" v-model="pagination.storeId">
                <a-select-option :value="item.storeId" v-for="(item, index) in storeList" :key="index">{{
                  item.storeName
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="预算项目">
              <selectProject @input="onInput" style="width: 100%;"></selectProject>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" style="margin-bottom: 10px;width: 200px;">
            <a-form-item>
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
            </a-form-item>

          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="filter-container">
      <template>
        <div>
          <a-button type="primary" @click="onAdd" icon="plus" style="margin-right: 20px;">
            新增预测模型
          </a-button>
        </div>
      </template>
    </div>
    <a-back-top />
    <div>
      <template>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :loading="loading"
          :rowKey="(record, index) => { return index }"
          :scroll="{ x: 900, y: 600 }"
          :pagination="pagination">
          <template slot="periodType" slot-scope="text, record">
            {{ record.periodType==2?'月数据':record.periodType==3?'日数据':'' }}
          </template>
          <span slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="onEdit(record)" >编辑</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="onDel(record)">删除</a>
          </span>

        </a-table>
      </template>
    </div>
    <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>

  </a-card>
</template>

<script>

//   import { getBudgets } from '@/api/budget'
//   import { getStores } from '@/api/stores'
import saveModal from './save'
import selectProject from './selectProject'
import { getStores } from '@/api/stores'
import { getModel, delModel } from '@/api/analyse'
import { Modal } from 'ant-design-vue'
export default {
    components: { selectProject, saveModal },
    data () {
        return {
            // 高级搜索 展开/关闭
            advanced: false,

            columns: [
                {
                    title: '门店',
                    dataIndex: 'storeName',
                    key: 'storeName',
                    align: 'center',
                    width: 150
                },
                {
                    title: '预算项目名称',
                    dataIndex: 'projectName',
                    key: 'projectName',
                    align: 'center',
                    width: 120
                },
                {
                    title: '预测模型',
                    dataIndex: 'model',
                    key: 'model',
                    align: 'center',
                    width: 120
                },
                {
                    title: '周期类型',
                    dataIndex: 'periodType',
                    key: 'periodType',
                    align: 'center',
                    width: 160,
                    scopedSlots: { customRender: 'periodType' }
                },
                {
                    title: '备注',
                    dataIndex: 'description',
                    key: 'description',
                    align: 'center',
                    width: 120
                },
                {
                    title: '操作',
                    width: '150px',
                    dataIndex: 'action',
                    align: 'center',
                    // fixed: 'right',
                    width: 150,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            dataSource: [],
            dialog: {
                save: false
            },

            pagination: {
                // 分页配置
                pageSize: 20, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 6, // 总条数
                storeId: undefined,
                projectId: undefined,
                model: undefined,
                onChange: this.handlePageChange // 页码改变时的回调函数
            },
            // 门店
            storeList: [],
            loading: true
        }
    },

    mounted () {
        getStores({ storeName: '' }).then(res => {
            if (res.code == 200) {
                this.storeList = res.data
            }
        })

        this.tableData()
    },
    methods: {
        onAdd () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                console.log(row)
                this.$refs.saveModal.open('edit', row)
            })
        },
        tableData () {
            this.loading = true
            const par = {
                ...this.pagination
            }
            if (par.model == undefined) par.model = ''
            if (par.projectId == undefined) par.projectId = ''
            if (par.storeId == undefined) par.storeId = ''
            getModel(par).then(res => {
                if (res.code == 200) {
                    this.dataSource = res.data.datas
                    this.pagination.total = res.data.total
                }
                this.loading = false
            })
        },
        // 选择预算项目
        onInput (e) {
            this.pagination.projectId = e
        },
        // 搜索
        onSearch () {
            this.pagination.current = 1
            this.pagination.pageSize = 6
            this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                pageSize: 20, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 6, // 总条数
                storeId: undefined,
                projectId: undefined,
                model: undefined,
                onChange: this.handlePageChange // 页码改变时的回调函数
            }
            this.selectPriceDate = ''
            this.BeginAndEnd = []
            this.tableData()
        },
        onDel (row) {
            const _this = this
            const par = {
                storeId: Number(row.storeId),
                projectId: Number(row.projectId)
            }
            Modal.confirm({
                title: '删除信息',
                content: '确定要删除吗？',
                onOk: () => {
                    delModel(par).then(res => {
                        if (res.code == 200) {
                            _this.tableData()
                            _this.$message.success('删除成功')
                        } else {
                            _this.$message.error(res.message)
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="less" >
// .vTable {
//     height: 400px;
//     overflow-y: auto;
//     overflow-x: hidden;
// }

.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}
</style>
